<template>
    <div class="calendar">
        <div class="calendar-header">
            <!-- <button @click="prevMonth">上个月</button> -->
            <i class="el-icon-back" @click="prevMonth"></i>
            <span>{{ currentYear }}年{{ currentMonth }}月 </span>
            <i class="el-icon-right" @click="nextMonth"></i>
            <!-- <button @click="nextMonth">下个月</button> -->
        </div>
        <div class="calendar-body">
            <div class="week-header">
                <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
            </div>
            <div class="week" v-for="(week, index) in weeks" :key="index">
                <div v-for="(day, dayIndex) in week" :key="dayIndex" class="day"
                    :class="{ 'today': isToday(day), 'other-month': isOtherMonth(day), 'current-day': isCurrentDay(day) }">
                    {{ day.getDate() }}
                    <!-- <div v-if="isToday(day)" class="today-border"></div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentDate: new Date(),
            currentMonth: '',
            currentYear: '',
            weekDays: ['日', '一', '二', '三', '四', '五', '六'],
            weeks: [],
        };
    },
    mounted() {
        this.generateCalendar();
    },
    methods: {
        generateCalendar() {
            const firstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
            const lastDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0);
            const offset = firstDay.getDay(); // 获取本月第一天是周几  
            // 计算需要补全的上周天数  
            const prevMonthDays = [];
            for (let i = offset; i > 0; i--) {

                prevMonthDays.push(new Date(firstDay.getFullYear(), firstDay.getMonth(), firstDay.getDate() - i));
            }
            // 计算本月天数  
            const currentMonthDays = [];
            for (let i = 1; i <= lastDay.getDate(); i++) {
                currentMonthDays.push(new Date(firstDay.getFullYear(), firstDay.getMonth(), i));
            }
            // 计算需要补全的下月天数，使得总天数为6周*7天  
            const nextMonthDays = [];
            const totalDays = 6 * 7; // 6周的总天数  
            const currentDays = prevMonthDays.length + currentMonthDays.length;
            for (let i = 1; i <= totalDays - currentDays; i++) {
                nextMonthDays.push(new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, i));
            }
            // 合并数组  
            const allDays = [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
            // 分割成6周  
            this.weeks = [];
            for (let i = 0; i < allDays.length; i += 7) {
                this.weeks.push(allDays.slice(i, i + 7));
            }
            // 更新当前月份和年份  
            // this.currentMonth = this.currentDate.toLocaleString('default', { month: 'long' });
            this.currentMonth = (this.currentDate.getMonth() + 1).toString().padStart(2, '0');
            this.currentYear = this.currentDate.getFullYear();
        },
        prevMonth() {
            this.currentDate.setMonth(this.currentDate.getMonth() - 1);
            this.generateCalendar();
        },
        nextMonth() {
            this.currentDate.setMonth(this.currentDate.getMonth() + 1);
            this.generateCalendar();
        },
        isToday(day) {
            const today = new Date();
            return day.getFullYear() === today.getFullYear() && day.getMonth() === today.getMonth() && day.getDate() === today.getDate();
        },
        isOtherMonth(day) {
            return day.getMonth() !== this.currentDate.getMonth();
        },
        formatDate(date) {
            return date.getDate();
        },
        isCurrentDay(day) {
            const today = new Date();
            return day.toDateString() === today.toDateString();
        }
    },
    mounted() {
        // this.currentMonth = this.currentDate.getMonth();
        this.generateCalendar();
    },
};  
</script>
<style scoped lang="scss">
.calendar {
    width: 300px;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
}

.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.week {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.week-day {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.week-days,
.weeks {
    display: flex;
    justify-content: space-between;
}

.day {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

.day.today {
    border: 1px solid rgb(90, 156, 248);
    color: rgb(90, 156, 248);
}

.day.other-month {
    color: #ccc;
}

.current-day {
    border: 1px solid rgb(90, 156, 248);
    color: rgb(90, 156, 248);
}

.today-border {
    border: 1px solid rgb(90, 156, 248);
    color: rgb(90, 156, 248);
}
</style>